<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertocal-align
		      使用方法：1.用于表格中单元格垂直居中
			           2.用于行内元素以及行内块元素的垂直居中
					     【文本和图片垂直居中（对齐）效果】
						 对齐分为四种：基线对齐、顶部对齐
						              居中对齐、底部对齐
						元素种类：块元素、行元素、行内块元素
						块元素特点：独占一行、设置宽高
						行元素特点：一行内显示、不设置宽高
						网页：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提：设置宽高---行套块 
						             ---块套块 √
									 ---块套行  √
						前提：一行内显示---行套块	√
								       ---块套块
									   ---块套行 √
									   ---行套行 √
			  -->
			  <style>
				  im g:nth-child(1){
					  /* vertical-align:baseline; */
				  }
				  /* 问题：派生选择器，特点：找后代 p img */
				  
				 img.baseline{
					 vertical-align: baseline;
				 }
				 img.top{
					 vertical-align: top;
				 }
				 img.middle{
					 vertical-align: middle;
				 }
				 img.bottom{
					 vertical-align: bottom;
				 }
				/*  */
				
			  </style>
				
			  
	</head>
	<body> 
	
		<!-- 需求结构：4个p，嵌套文字： 图片叫什么名字
                            文字后加img，设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐、居中对齐、底部对齐
					  -->
		<h1>文本与图片垂直属性</h1>
		<p>坤<img  class="baseline"  src="img/1.png" alt="1" / width="100px" height="50px">基线对齐、</p>
		<p>尔扎<img class="top"   src="img/2.png" alt="2" / width="100px" height="50px">顶部对齐</p>
		<p>我的<img  class="middle" src="img/3.png" alt="3" / width="100px" height="50px">居中对齐</p>
		<p>你的<img   class="bottom"    src="img/4.png" alt="4" / width="100px" height="50px">底部对齐</p>
		<!-- css选择器--抓第一张图片。。。
		 思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		 错误原因：html结构不符合派生特点：p包含4个img
		          伪类选择器，4个img需要在一个p中
		 p img:nth-child(1)
		 -->
	</body>
</html>